<template>
	<view class="content">
		<view class="top-box">
			<view class="flex-row font-2 title">
				{{title}}，今日门开关情况统计
			</view>
			<view class="flex-row font-1 top-block">
				<view class="">
					今日开启时长：{{topInfo.todayTime || 0}}
				</view>
				<view class="">
					今日开启次数：{{topInfo.todayCount || 0}}
				</view>
			</view>
		</view>
		<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		<view class="search-button" @tap="toSearch">查询</view>
		<view class="table">
			<view class="flex-row th">
				<view class="flex-1">
					序号
				</view>
				<view class="flex-1">
					动作
				</view>
				<view class="flex-2">
					开门时间
				</view>
				<view class="flex-2">
					关门时间
				</view>
			</view>
			<template v-for="item in list">
				<view class="flex-row td">
					<view class="flex-1">
						{{item.id}}
					</view>
					<view class="flex-1">
						{{item.confItemTitle}}
					</view>
					<view class="flex-2">
						{{item.startTime}}
					</view>
					<view class="flex-2">
						{{item.endTime}}
					</view>
				</view>
			</template>
			<view class="flex-row td" v-if="!list.length">
				<view class="flex-1">
					暂无数据
				</view>
			</view>
			<uni-load-more iconType="circle" :status="status" :iconSize="20" v-if="showLoadMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				topInfo: {},
				list: [],
				pageSize: 20,
				pageNo: 1,
				pageCount: null,
				status: 'noMore',
				showLoadMore: false,
				title: '',
				datetimerange: [],
				startTime: '',
				endTime: ''
			};
		},
		onLoad(e) {
			this.id = e.id
			this.title = e.name
			uni.setNavigationBarTitle({
				title: e.name
			})
			this.getTop()
			this.getData()
		},
		methods: {
			getTop(){
				this.$api.get('api/mobile/getDoorInfo',{id: this.id}).then(res => {
					this.topInfo = res.result
					console.log(this.topInfo);
				})
			},
			toSearch(){
				this.startTime = this.datetimerange.length ? this.datetimerange[0] : ''
				this.endTime = this.datetimerange.length ? this.datetimerange[1] : ''
				this.getData()
			},
			getData(){
				this.$api.get('api/mobile/doorList',{
					deviceId: this.id,
					startTime: this.startTime,
					endTime: this.endTime,
					pageSize: this.pageSize,
					pageNo: this.pageNo
					}).then(res => {
					if (this.pageNo > 1) {
						this.list = this.list.concat(res.result.records);
					} else {
						this.list = res.result.records
					}
					this.pageCount = res.result.pages
				})
			},
		},
		onReachBottom() {
		    this.pageNo++;
		    if (this.pageNo > this.pageCount) {
		       this.status = "nomore"
		        return;
		    }
			this.showLoadMore = true
		    this.status = "loading"
		    setTimeout(() => {
		        this.getData();
		    }, 300);
		}
	}
</script>

<style lang="scss">
.content{
	padding: 20rpx 10rpx;
	.top-box{
		margin-bottom: 40rpx;
		box-sizing: border-box;
		.title{
			justify-content: center;
			padding: 10rpx;
			color: #333333;
			font-weight: 600;
		}
		.top-block{
			padding: 20rpx 40rpx;
			color: #333333;
			justify-content: space-between;
		}
		.font-1{
			font-size: $uni-font-size-30;
		}
		.font-2{
			font-size: $uni-font-size-32;
		}
	}
	.search-button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		padding: 20rpx;
		color: #ffffff;
		background-color: $uni-background-red;
		border-radius: 12rpx;
	}
	.table{
		display: flex;
		flex-direction: column;
		font-size: $uni-font-size-28;
		.th{
			align-items: center;
			background-color: #efefef;
		}
		.td{
			align-items: center;
			border-bottom: 1rpx solid #efefef;
		}
		.flex-1{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 1;
		}
		.flex-2{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 2;
		}
		.blue{
			color: #0026ff;
		}
	}
}
</style>
